<template>
	<!-- 标题栏 -->
	<view class="index-top" :class="{'head-bottom-line': bottomline}">
		 <view>
			 <view class="icon-index-left flex-center-center" @tap="goBack" v-if="!notback">
				<text class="img-size-repeat"></text>
			 </view>
		 </view>
		 <view class="index-top-text" :class="{'width': subject}"><text class="font36 color333">{{ title }}</text></view>
		 <view class="index-top-op flex-center">
			<text class="icon-index-sousuo img-size-repeat" @tap="navToTabPage('/pages/search/search')" v-if="index || category"></text>
			<view class="index-top-op-message" v-if="index">
				<!-- @tap="navToTabPage('/pages/messageBox/index')" -->
				<image class="icon-index-message img-size-repeat"></image>
				<text class="red-circle" v-if="indexMsg"></text>
			</view>
			<text class="icon-index-share img-size-repeat" @tap="$emit('share')" v-if="product || comment"></text>
			<view class="index-more flex-center-center" v-if="product" @tap="$emit('moremenu', true)">
				<text class="icon-index-more img-size-repeat"></text>
			</view>
			<text class="icon-index-sousuo img-size-repeat" @tap="navToTabPage('/pages/search/searchOrder')" v-if="order"></text>
			<text class="icon-index-msg img-size-repeat" v-if="server"></text>
			<text class="icon-index-query img-size-repeat" @tap="navToTabPage('/pages/comment/commentIntroduce')" v-if="mycomment"></text>
		 </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true
		}
	},
	methods:{
		// 返回
		goBack() {
			if(this.self) {
				this.$emit('back')
			}else if(this.mine) {
				uni.reLaunch({ url: '/pages/personal/plainUser' })
			} else {
				uni.navigateBack()
			}
		},
		// 页面跳转
		navToTabPage(url) {
			uni.navigateTo({
				url: url
			})
		},
	},
	// 标题、不返回、首页、首页通知、专题、分类、商品详情、底部有一条线、评价详情的分享、自己跳转、订单、售后服务、我的评价、跳转到我的
	props: ["title", "notback", "index", "indexMsg", "subject", "category", "product", 'bottomline', 'comment', 'self', 'order', 'server', 'mycomment', 'mine']
}
</script>

<style lang="scss">
.index-top {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	&>view {
		flex: 1;
		.icon-index-left {
			width: 79rpx;
			height: 88rpx;
			text {
				width: 19rpx;
				height: 34rpx;
				background-image: url('/static/image/leftblack.png');
			}
		}
	}
	.index-top-text {
		flex: 1.5;
		line-height: 88rpx;
		text-align: center;
		&.width {
			flex: 4;
		}
	}
	.index-top-op {
		justify-content: flex-end;
		.icon-index-query {
			width: 42rpx;
			height: 42rpx;
			margin-right: 40rpx;
			background-image: url('/static/image/query.png');
		}
		.icon-index-sousuo {
			width: 42rpx;
			height: 40rpx;
			margin-right: 40rpx;
			background-image: url('/static/image/sousuo.png');
		}
		.index-top-op-message {
			margin-top: 11rpx;
			position: relative;
			margin-right: 42rpx;
			.icon-index-message {
				width: 39rpx;
				height: 45rpx;
				background-image: url('/static/image/message.png');
			}
			.red-circle {
				position: absolute;
				top: -4rpx;
				right: -4rpx;
				width: 12rpx;
				height: 12rpx;
				background-color: #C84739;
				border-radius: 50%;
			}
		}
		.icon-index-share {
			margin-right: 15rpx;
			width: 42rpx;
			height: 38rpx;
			background-image: url('/static/image/share.png');
		}
		.index-more {
			width: 78rpx;
			height: 88rpx;
			margin-right: 15rpx;
			.icon-index-more {
				width: 48rpx;
				height: 8rpx;
				background-image: url('/static/image/more.png');
			}
		}
		.icon-index-msg {
			width: 44rpx;
			height: 41rpx;
			margin-right: 40rpx;
			background-image: url('/static/image/servermsg.png');
		}
	}
}
.head-bottom-line {
	border-bottom: 1rpx solid #eee;
}
</style>
